<script setup>
import { ref } from "@vue/reactivity";

    
    defineProps({
        fildsList: Array,
        rows: Array,
    });
    const emit = defineEmits(["delRow"])

    
    let menu = ref(null);
    let showMenu = ref(false);
    let id = ref(-1);
    const handleMenu = (e) => {
        const fn = ()=>{
            showMenu.value = false;
            id.value = -1;
            document.removeEventListener("click",fn);
        }
        document.addEventListener("click",fn);
        showMenu.value = true;
        menu.value.style.left = e.clientX + 5 + "px";
        menu.value.style.top = e.clientY + 5 + "px";
        id.value = e.path[1].__vnode.key;
        e.preventDefault();
    }
    const delClick = () => {
        emit("delRow",id.value)
    }

</script>
 
<template>
    <div class="container">
        <div class="header">
            <div v-for="item in fildsList" :key="item">
                {{item}}
            </div>
        </div>
        <div class="body">
            <div v-for="row in rows" :key="row.Id" class="row" :class="{'active-row':id===row.Id}" @contextmenu="handleMenu">
                <div v-for="item in fildsList" :key="item">
                    {{row[item]}}
                </div>
            </div>
        </div>
        <div class="del-container" ref="menu" v-show="showMenu" @click="delClick">
            删除 
        </div>
    </div>
</template>

<style lang='less' scoped>
    .container {
        margin-left: 20px;
        .header {
            display: flex;
            flex-wrap: nowrap;
            div {
                text-align: center;
                width: 100px;
                border: 1px solid rgba(0, 0, 0, .2);
            }
        }
        .body {
            .row {
                display: flex;
                div {
                    border: 1px solid rgba(0, 0, 0, .2);
                    width: 100px;
                    height: 30px;
                    white-space: nowrap;
                    overflow: auto;
                    &::-webkit-scrollbar {
                        height: 5px;
                    }
                    &::-webkit-scrollbar-thumb { //滚动条里面的方块
                        border-radius: 10px;
                        width: 40px;
                        box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
                        background: #535353;
                    }
                    &::-webkit-scrollbar-track { //滚动条轨道
                        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
                        border-radius: 10px;
                        background: #EDEDED;    
                    }
                }
            }
            .active-row {
                background: #add5d6;
            }
        }
        .del-container {
            position: fixed;
            width: 80px;
            height: 20px;
            line-height: 20px;
            background-color: #4d4a4a;
            border-radius: 5px;
            text-align: center;
            color: white;
        }
    }
</style>